<template>
  <div class="video_container can_hover">
    <a>
      <div class="video_wrap">
        <div
          class="image_area"
          @mouseenter="enter"
          @mouseleave="leave"
          ref="imageArea"
        >
          <div class="types">投稿视频</div>
          <div class="cover_preview_module" :class="previewShow ? 'show' : ''">
            <div
              class="cover"
              :style="{
                backgroundImage: `url(${videoMsg.previewPic})`,
                backgroundPosition: `${
                  -Math.floor(widthPercent / 10) * 203
                }px 0px`,
                backgroundSize: `2030px`,
              }"
            ></div>
            <div class="progress_bar">
              <span :style="{ width: `${widthPercent}%` }"></span>
            </div>
          </div>
          <img :src="videoMsg.cover" />
          <div class="mask">
            <span>{{ videoMsg.time }}</span>
          </div>
          <div class="danmu_module" :class="danmuShow?'show':''">
            <p
              class="dm"
              :class="item.row2 ? 'row2' : ''"
              v-for="(item, index) in danmuList"
              :ref="`${index}`"
              :style="[
                {
                  transition: item.transition,
                },
                item.translateX
                  ? { transform: `translateX(${-item.translateX}px)` }
                  : {},
              ]"
            >
              {{ item.content }}
            </p>
          </div>
          <div
            class="see_later"
            :class="videoMsg.seeLater ? 'done' : ''"
            @mouseenter="seeLaterEnter"
            @mouseleave="seeLaterLeave"
            @click="addSeeLater"
          >
            <div class="tips" v-show="tipShow">{{ tipContent }}</div>
          </div>
        </div>
        <div class="text_area">
          <div class="title">{{ videoMsg.title }}</div>
          <div class="content">
            {{ videoMsg.content }}
          </div>
          <div class="view_danmuku">
            <div>
              <i class="iconfont icon_font icon-video"></i>
              <span class="view">{{ videoMsg.viewNum }}</span>
            </div>
            <div>
              <i class="iconfont icon_font icon-danmushu"></i>
              <span class="danmuku">{{ videoMsg.danmuNum }}</span>
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      $imageArea: null,
      imageAreaWidth: 0,
      widthPercent: 0,
      previewShow: false, //开启预览
      hoverTime: 500, //保持hover时间(ms)
      hoverTimeout: null, //hover延时器
      tipShow: false, //显示提示
      tipContent: "稍后再看", //提示内容
      danmuShow: false, //显示弹幕
      danmuList: null,
      loadNum: 0, //加载弹幕的数量
      loadend: false, //是否加载完成弹幕
      loadIndex: 0, //渲染到第几条
      loadInterval: null, //渲染用循环定时器
      loadTime: 1000, //渲染间隔
    };
  },
  props: {
    videoMsg: {
      typeof: Object,
      required: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$imageArea = this.$refs.imageArea;
      this.imageAreaWidth = this.$imageArea.offsetWidth;
      this.$imageArea.addEventListener("mousemove", (event) => {
        let { offsetX } = event;
        this.widthPercent = Math.floor((offsetX * 100) / this.imageAreaWidth);
      });
    });
  },
  methods: {
    enter() {
      if (this.hoverTimeout) {
        clearTimeout(this.hoverTimeout);
        this.hoverTimeout = null;
      }
      this.hoverTimeout = setTimeout(() => {
        this.previewShow = true;
        this.danmuShow = true;
        // 加载弹幕列表
        if (!this.loadend) this.loadDanmu();
        // 逐条添加变形样式
        this.loadInterval = setInterval(() => {
          // 当最后一个完成后清除所有样式，并重新逐条添加变形样式
          if (this.loadIndex >= this.loadNum + 5) {
            this.loadIndex = 0;
            this.loadDanmu();
          }
          if (this.loadIndex < this.loadNum) {
            let danmu = this.danmuList[this.loadIndex];
            if (this.loadIndex % 2 == 1) {
              this.$set(danmu, "row2", true);
            }
            let width = this.$refs[this.loadIndex][0].offsetWidth;
            let translateX = width + this.imageAreaWidth + 5; //变形长度
            let transition = `transform 5s linear 0s`;
            this.$set(danmu, "translateX", translateX);
            this.$set(danmu, "transition", transition);
          }
          this.loadIndex++;
        }, this.loadTime);
      }, this.hoverTime);
    },
    leave() {
      this.previewShow = false;
      this.danmuShow = false
      clearTimeout(this.hoverTimeout);
      this.hoverTimeout = null;
      // 中途移出鼠标则停止渲染
      clearInterval(this.loadInterval);
      this.loadInterval = null;
    },
    seeLaterEnter() {
      this.tipShow = true;
      if (this.videoMsg.seeLater) {
        this.tipContent = "移除";
      } else {
        this.tipContent = "稍后再看";
      }
    },
    seeLaterLeave() {
      this.tipShow = false;
    },
    addSeeLater() {
      // 发送请求// 成功
      if (this.videoMsg.seeLater) {
        this.$set(this.videoMsg, "seeLater", false);
        this.tipContent = "已加稍后再看";
      } else {
        this.$set(this.videoMsg, "seeLater", true);
        this.tipContent = "已从稍后再看列表中移除";
      }
    },
    // 加载弹幕
    loadDanmu() {
      this.danmuList = this.videoMsg.danmuList.map((item) => {
        return {
          content: item,
        };
      });
      this.loadNum = this.danmuList.length;
      this.loadend = true;
    },
    // 渲染弹幕
    renderDanmu() {},
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
  outline: none;
}
.icon_font {
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased; //字体抗锯齿
  letter-spacing: 0.2px;
}
.video_container {
  width: 520px;
  height: 127px;
  background-color: #fff;
  border-radius: 4px;
  text-align: left;
  position: relative;
  border: 1px solid #e5e9ef;
  overflow: hidden;
  &.can_hover {
    cursor: pointer;
    &:hover .image_area .mask {
      opacity: 1;
    }
    &:hover .image_area .see_later {
      opacity: 1;
    }
    &:hover .text_area .title {
      color: #00a1d6;
    }
  }
  .image_area {
    width: 203px;
    height: 127px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0 4px 4px 0;
    }
    .mask {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.2);
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
      font-size: 12px;
      transition: opacity 0.2s cubic-bezier(0.22, 0.58, 0.12, 0.98);
      span {
        position: absolute;
        bottom: 8px;
        left: 8px;
      }
    }
    .see_later {
      width: 22px;
      height: 22px;
      opacity: 0;
      background-image: url("/static/video/see_later.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
      position: absolute;
      bottom: 8px;
      right: 10px;
      transition: opacity 0.2s cubic-bezier(0.22, 0.58, 0.12, 0.98);
      &.done {
        background-image: url("/static/video/see_later_ok.png");
      }
      .tips {
        padding: 6px 8px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        position: absolute;
        white-space: nowrap;
        top: -27px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .types {
    height: 18px;
    padding: 0 4px;
    background-color: #fb7299;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 3;
    border-radius: 2px;
    transition: opacity 0.2s cubic-bezier(0.22, 0.58, 0.12, 0.98);
  }
  .text_area {
    width: 289px;
    height: 100%;
    margin: 0 12px 0 16px;
    display: inline-block;
    vertical-align: top;
    .title {
      color: #212121;
      height: 38px;
      max-height: 2.714285714285714em;
      line-height: 19px;
      margin-top: 9px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
    .content {
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 12px;
      line-height: 19px;
      max-height: 3.166666666666667em;
      margin-top: 8px;
      color: #666;
      height: 38px;
    }
    .view_danmuku {
      font-size: 12px;
      color: #999;
      line-height: 18px;
      margin-top: 9px;
      & > div {
        margin-right: 10px;
        display: inline-block;
        .icon-video,
        .icon-danmushu {
          vertical-align: -2px;
          margin-right: 4px;
        }
      }
    }
  }
}
.cover_preview_module {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  &.show {
    opacity: 1;
  }
  .cover {
    position: absolute;
    left: 0;
    top: 11px;
    height: 118px;
    width: 100%;
    margin-top: 2px;
  }
  .progress_bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 13px;
    border-width: 5px 8px 6px 8px;
    border-style: solid;
    border-color: #000;
    background-color: #444;
    box-sizing: border-box;
    span {
      display: block;
      background-color: #fff;
      height: 2px;
    }
  }
}
.danmu_module {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.3s;
  overflow: hidden;
  &.show {
    opacity: 1;
  }
  .dm {
    position: absolute;
    color: #fff;
    left: 100%;
    will-change: transform;
    white-space: pre;
    text-shadow: 1px 1px 2px #001;
    top: 8px;
    &.row2 {
      top: 25px;
    }
  }
}
</style>